html,
body {
  margin: 0;
  padding: 0;
}
#root {
  height: 100%;
}
.ant-layout {
  height: 100%;
}
.logo {
  background-color: rgba(255, 255, 255, 0.3);
  margin: 16px;
  height: 32px;
}
.box {
  margin-top: 20px;
  border: 1px solid rgb(240, 240, 240);
  position: relative;
  .box-header {
    color: #333;
    font-weight: 600;
    font-size: 18px;
    position: absolute;
    left: 6px;
    top: -18px;
    padding: 0 6px;
    background-color: #fff;
  }
  @paddingLeftAndRight: 24px;
  .box-body {
    padding: 18px @paddingLeftAndRight 12px @paddingLeftAndRight;
    color: #333;
    @paddingLeft: 10px;
    .box-title {
      font-size: 16px;
      font-weight: 500;
      margin-bottom: 20px;
      position: relative;
      font-style: italic;
      padding-left: @paddingLeft;
      &::before {
        position: absolute;
        content: '';
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background-color: #333;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
      }
    }
    .box-content {
      padding-left: @paddingLeft;
      font-size: 14px;
      margin-bottom: 10px;
      .ant-btn {
        & + .ant-btn {
          margin-left: 10px;
        }
      }
    }
  }
  .box-footer {
    border-top: 1px solid rgb(240, 240, 240);
    padding: 10px @paddingLeftAndRight;
    font-size: 14px;
    line-height: 1.2;
    color: #333;
    &.success {
      color: rgb(82, 196, 26);
    }
    &.error {
      color: rgb(255, 77, 79);
    }
    &.warning {
      color: rgb(250, 173, 20);
    }
    &.primary {
      color: rgb(24, 144, 255);
    }
  }
}
